<!-- 拖拽测试 -->
<template>
  <section class="drag-and-drop">
    <div
      class="container"
      v-for="item of 5"
      :key="item"
      @dragstart.self.prevent
      @dragenter.self="handleContainerDragEnter"
      @dragover.self.prevent
      @dragleave.self="handleContainerDragLeave"
      @drop.self="handleContainerDrop"
    >
      <div
        v-if="item === 1"
        class="draggable"
        draggable="true"
        @dragstart="handleDragStart"
        @dragend="handleDragEnd"
      ></div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Name',

  components: {},

  props: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {
    /**
     * * 可拖拽元素事件
     */
    handleDragStart(e) {
      console.log(e.target.classList[0], 'item-start') // eslint-disable-line
      setTimeout(() => {
        e.target.classList.add('invisable')
      }, 0) // 一定要是异步操作，否则刚drag，元素就消失了
    },
    handleDragEnd(e) {
      console.log(e.target.classList[0], 'item-end') // eslint-disable-line
      e.target.classList.remove('invisable')
    },

    /**
     * * 容器事件
     */
    handleContainerDragEnter(e) {
      console.log(e.target.classList[0], 'container-enter') // eslint-disable-line
      e.target.classList.add('drag-over')
    },
    handleContainerDragLeave(e) {
      console.log(e.target.classList[0], 'container-leave') // eslint-disable-line
      e.target.classList.remove('drag-over')
    },
    handleContainerDrop(e) {
      console.log(e.target.classList[0], 'container-drop') // eslint-disable-line
      // TODO fan ajax请求，处理数据

      // 请求成功后，处理数据
      e.target.classList.remove('drag-over')
      const dragItem = document.querySelector('.draggable')

      e.target.append(dragItem)
    },
  },
}
</script>

<style lang="scss" scoped>
.drag-and-drop {
  @if 5 > 3 {
    width: 180px * 5;
  }
  display: flex;
  justify-content: space-between;
  .container {
    width: 166px;
    height: 166px;
    border: 3px salmon solid;

    .draggable {
      background-image: url('http://source.unsplash.com/random/150x150');
      position: relative;
      height: 150px;
      width: 150px;
      top: 5px;
      left: 5px;
      cursor: pointer;
    }
    .invisable {
      // display: none;
    }
  }

  .drag-over {
    background-color: #f4f4f4;
    border-style: dashed;
  }
}
</style>
